<template>
  <div>
    <p>{{ text }} <span class="typing blinker"></span></p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: "当我作为前端开发者使用Vue.js来实现类似于打字效果的输出时",
      text: ""
    };
  },
  mounted() {
    this.typeWriter();
  },
  methods: {
    typeWriter() {
      let i = 0;
      const speed = 1000; // 打字速度，单位为毫秒
      const length = this.message.length;
      const timer = setInterval(() => {
        if (i < length) {
          this.text += this.message.charAt(i);
          i++;
        } else {
          clearInterval(timer);
        }
      }, speed);
    },
		
  }
};
</script>

<style>
/* // 光标字符显示 */
.typing::after {
  content: ' ';
	width: 8px;
	height: 30px;
	background-color: red;
	display: inline-block;
}
/* // 光标闪烁动画 */
.blinker::after {
  animation: blinker 0.5s step-end infinite;
}
@keyframes blinker {
  0% {
    visibility: visible;
  }
  50% {
    visibility: hidden;
  }
  100% {
    visibility: visible;
  }
}

</style>